<template>
    <div style="min-width: 1500px;">
        <el-input class="search" v-model="queryCriteria.query" placeholder="" style="width: 900px; margin-right: 25px;"
            clearable />
        <el-button type="danger" @click="queryByPage">查询</el-button>
    </div>
    <!-- 条件导航 -->
    <div class="article-menu">
        <div class="first-menu">
            <div class="menu-left">
                <span>分类</span>
            </div>
            <template v-for="(data, i) in classification">
                <div class="menu-right">
                    <div :class="ClassificationSubscript == i ? 'change-bg' : ''" @click="changeClassification(i)">
                        <span>{{ data }}</span>
                    </div>
                </div>
            </template>

        </div>
        <div class="division"></div>
        <div class="second-menu">
            <div class="menu-left">
                <span>排序</span>
            </div>
            <template v-for="(data, index) in collation">
                <div class="menu-right">
                    <div :class="CollationSubscript == index ? 'change-bg' : ''" @click="changeCollation(index)">
                        <span>{{ data }}</span>
                    </div>
                </div>
            </template>

        </div>
    </div>
    <div class="operation">
        <div style="font-weight: bolder;">
            文章数量：
            <span>{{ articleCount }}</span>
            篇
        </div>
        <el-button type="danger" @click="deleteTip(-1)">删除选中</el-button>
    </div>

    <!-- 表格 -->
    <div style="max-width: 1600px;min-width: 1000px;margin: auto;">
        <el-row style="height: 550px;padding-top: 20px;justify-content: flex-end;">
            <el-table :data="pageList.recodes" border style="width: 100%" @selection-change="handleSelectionChange"
                @select='onTableSelect' :row-key="getRowKeys" :header-cell-style="{ 'text-align': 'center' }"
                :cell-style="{ 'text-align': 'center' }" :row-class-name="rowStyle">
                <el-table-column fixed="left" type="selection" width="55" :reserve-selection="true" />
                <el-table-column type="index" label="编号" width="60" />
                <el-table-column show-overflow-tooltip="true" prop="title" label="文章名称" width="200" />
                <el-table-column prop="nickName" label="所属用户" width="120" />
                <el-table-column prop="name" label="文章类型" width="120" />
                <el-table-column prop="updateTime" label="更新时间" width="180" />
                <el-table-column label="文章封面" width="90">
                    <template #default="scope">
                        <div>
                            <el-image width="40px" heigth="40px" :src="scope.row.firstImg" :fit="fill"></el-image>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="flag" label="标志" width="70" />
                <el-table-column prop="views" label="观看次数" width="90" />
                <el-table-column prop="likes" label="点赞数" width="90" />
                <el-table-column prop="commentCount" label="评论数" width="90" />
                <el-table-column prop="recommend" label="是否推荐" width="90" />
                <el-table-column prop="top" label="是否置顶" width="90" />
                <el-table-column prop="hot" label="是否热门" width="90" />
                <el-table-column prop="state" label="是否已删" width="100" />
                <el-table-column fixed="right" label="操作" width="200">
                    <template #default="scope">
                        <div style="margin-bottom: 5px;">
                            <el-button type="info" size="small" @click="showInfo(scope.row)" style="width: 108px;">查看文章内容</el-button>
                        </div>
                        <div>
                            <el-button size="small" type="primary" @click="ModifyInfo(scope.row)">修改</el-button>
                            <template v-if="scope.row.state == 0">
                                <el-button type="danger" size="small" @click="deleteTip(scope.row.id)">删除
                                </el-button>
                            </template>
                            <template v-if="scope.row.state == 1">
                                <el-button type="success" size="small" @click="recoverArticle(scope.row.id)">恢复
                                </el-button>
                            </template>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="page">
                <el-pagination background layout="prev, pager, next" :total="pageList.count"
                    :page-size="pageList.pageSize" :current-page="pageList.currentPage" @current-change="changepage">
                </el-pagination>
            </div>
        </el-row>

    </div>

    <!-- 是否删除对话框 -->
    <el-dialog v-model="dialogDeleteVisible" title="是否删除该文章" width="30%">
        <el-button @click="dialogDeleteVisible = false">否</el-button>
        <el-button type="primary" @click="sureDelete">是</el-button>
    </el-dialog>

    <!-- 文章内容 -->
    <el-dialog v-model="dialogArticleVisible" :title="article.title">
        <el-scrollbar height="500">
            <div id="wrapper" class="typo typo-selection">
                <div v-html="article.content" style="text-align: left;"></div>
            </div>
        </el-scrollbar>

    </el-dialog>

    <!-- 文章内容 -->
    <el-dialog v-model="dialogFormVisible" title="修改文章信息" center>
        <el-form style="padding: 0 100px;">
            <el-form-item label="文章标题" :label-width="120">
                <el-input v-model="article.title" :placeholder="article.title" />
            </el-form-item>
            <el-form-item label="类型" :label-width="120" >
                <el-select v-model="article.name" class="m-2"  size="large" style="width: 100px;">
                    <el-option v-for="item in typeList" :label="item.name" :value="item.name" />
                </el-select>
            </el-form-item>
            <el-form-item label="标志" :label-width="120">
                <el-select v-model="article.flag" class="m-2" size="large" style="width: 100px;">
                    <el-option v-for="item in flagList" :label="item" :value="item" />
                </el-select>
            </el-form-item>
            <el-form-item label="是否推荐" :label-width="120">
                <el-radio-group v-model="article.recommend">
                    <el-radio :label="0" value="0">否</el-radio>
                    <el-radio :label="1" value="1">是</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="是否置顶" :label-width="120">
                <el-radio-group v-model="article.top">
                    <el-radio :label="0" value="0">否</el-radio>
                    <el-radio :label="1" value="1">是</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="是否热门" :label-width="120">
                <el-radio-group v-model="article.hot">
                    <el-radio :label="0" value="0">否</el-radio>
                    <el-radio :label="1" value="1">是</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="观看次数" :label-width="120">
                <el-input v-model="article.views" style="width: 150px;"/>
            </el-form-item>
            <el-form-item label="点赞数" :label-width="120">
                <el-input v-model="article.likes" style="width: 150px;"/>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">关闭</el-button>
                <el-button type="danger" @click.prevent="updateArticle">提交</el-button>
            </span>
        </template>

    </el-dialog>
</template>

<script>
import article from '@/api/article/article'
import { ElMessage } from 'element-plus';

export default {
    name: 'ArticleManage',

    data() {
        return {
            ids: [], //选中删除所需的id
            dialogArticleVisible: false,
            dialogFormVisible: false,
            dialogDeleteVisible: false,
            ClassificationSubscript: 0,
            CollationSubscript: 0,
            collation: ["最新文章", "最多观看", "最多点赞", "最多评论"],
            classification: ["全部", "热门", "置顶", "推荐", "原创", "翻译", "转载", "未删除", "已删除"],
            queryCriteria: {
                query: '',
                classificationType: -1,
                collationType: 0,
                current: 1,
                sort: false
            },
            pageList: '',
            article: '',
            articleCount: '',
            typeList: [],
            flagList:["原创","转载","翻译"],
        };
    },

    created() {
        this.queryByPage();
        this.listType();
    },
    mounted() {

    },

    methods: {
        listType() {
            article.listType()
                .then(re => {
                    if (re.data.code == 20000) {
                        this.typeList = re.data.data.typeList;
                    }
                })
        },
        // 分类的切换
        changeCollation(index) {
            this.queryCriteria.collationType = index
            if (this.CollationSubscript == index) {
                this.queryCriteria.sort = !this.queryCriteria.sort
            } else {
                this.CollationSubscript = index
            }
            this.queryByPage();
        },
        // 排序的切换
        changeClassification(i) {
            this.queryCriteria.classificationType = i - 1
            if (this.ClassificationSubscript == i) {
                this.queryCriteria.sort = !this.queryCriteria.sort
            } else {
                this.ClassificationSubscript = i
            }
            this.queryByPage();
        },
        //分页查询
        queryByPage() {
            article.queryByPage(this.queryCriteria).then(re => {
                //如果查询当前页无内容，再次发送请求获取上一页的内容
                if (re.data.data.pages.recodes.length == 0 && this.queryCriteria.current > 1) {
                    this.queryCriteria.current--;
                    this.queryByPage()
                }
                this.pageList = re.data.data.pages;
                this.articleCount = re.data.data.pages.count
            })
        },
        changepage(newPage) {
            this.queryCriteria.current = newPage
            this.queryByPage();
        },
        //恢复文章
        recoverArticle(id) {
            ElMessage.error("恢复文章功能还在维护！");
            // article.recoverArticle(id)
            //     .then(re => {
            //         if (re.data.code == 20000) {
            //             ElMessage.success("操作成功！")
            //             this.queryByPage()
            //         } else {
            //             ElMessage.error("操作失败！")
            //         }
            //     })
        },
        getRowKeys(row) {
            return row.id
        },
        handleSelectionChange(val) {
            this.ids = []
            for (let index = 0; index < val.length; index++) {
                this.ids.push(val[index].id);
            }
        },
        showInfo(data) {
            this.article = data;
            this.dialogArticleVisible = true;
        },
        ModifyInfo(data) {
            this.article = data;
            this.dialogFormVisible = true;
        },
        //是否删除
        deleteTip(id){
            if (id >= 0) {
                this.ids.push(id)
            }
            this.dialogDeleteVisible = true;
        },
        //确认删除
        sureDelete(){
            article.deleteMultipleArticle(this.ids).then(re => {
                if (re.data.code == 20000) {
                    ElMessage.success("删除成功！")
                    this.queryByPage()
                } else {
                    ElMessage.error("删除失败！")
                }
            })
            this.dialogDeleteVisible = false;
        },
        updateArticle() {
            article.updateArticle(this.article).then(re => {
                if (re.data.code == 20000) {
                    ElMessage.success("修改成功！")
                    this.queryByPage()
                } else {
                    ElMessage.error("修改失败！")
                }
            })
            this.dialogFormVisible = false;
        },
        rowStyle({row,rowIndex}){
            if(row.state == 1){
                return 'warning-row'
            }            
        }
    },
};
</script>

<style scoped>
@import '../assets/css/typo.css';

.article-menu {
    margin: auto;
    margin-top: 25px;
    width: 90%;
    max-width: 1400px;
    min-width: 1300px;
    height: 20%;
    background-color: #f56c6c;
}

.article-menu span {
    color: #eee;
}

.article-menu .menu-right {
    cursor: pointer;
}

.first-menu {
    height: 50%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.menu-left {
    margin: 0 50px;
}

.menu-right {
    margin-right: 25px;
}

.menu-right {
    text-align: center;
}

.menu-right span {
    margin: 0 15px;
}

.change-bg {
    text-align: center;
}

.change-bg {
    background-color: #fff;
    border-radius: 4px;
}

.change-bg span {
    color: #f56c6c;
}

.division {
    width: 95%;
    margin: auto;
    border-bottom: 1px dashed #fff;
}

.second-menu {
    height: 50%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.search :deep(.is-focus) {
    box-shadow: 0 0 0 1px #f56c6c;
}

.operation {
    margin: auto;
    margin-top: 25px;
    max-width: 1400px;
    min-width: 1300px;
    display: flex;
    justify-content: space-between
}

.page {
    margin: 0 auto;
}
</style>